<template>
  <div class="form-no-padding-box">
    <el-dialog :visible.sync="dialogShow" width="85%" :title="currentRow.subjectName" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form label-width="133px" size="small">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="现金流量表金额">
              <el-input v-model="currentRow.executionAmount" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系统生成金额">
              <el-input v-model="currentRow.receivedAmount" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="差异金额">
              <el-input v-model="currentRow.diffAmount" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :border="true" :data="list" class="new-table-style">
        <el-table-column align="left" show-overflow-tooltip label="序号" width="90">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="资产编号" prop="assetName" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="租户名称" prop="partnerName" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="合同号" prop="contractCode" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="应收开始时间" prop="cycleStartTime" width="120"> </el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="应收结束时间" prop="cycleEndTime" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="应收金额" prop="amountReceivable" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="收款核销金额" prop="paymentAmount" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="核销时间" prop="actualPaymentDate" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="凭证生成时间" prop="voucherDate" width="120"></el-table-column>
        <el-table-column align="left" show-overflow-tooltip label="差异说明" prop="auditorsDesc" width="400">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.diffDesc" :rows="1" :autosize="{ minRows: 1, maxRows: 10}" :placeholder="isDisabled ? '' : '请填写差异说明'" :maxlength="200" :readonly="isDisabled" @blur="handleChooseList"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="padding-top-20">共计{{ total }}条，总收款金额{{ totalAmount }}元</div>

      <my-pagination v-if="total" @change="pageChange" :total="total" :current-page="currentPage" :pageSizes="pageSize" paginationLayout="total, prev, pager, next" />
      <el-form label-width="90px" size="small" class="margin-top-30">
        <el-row>
          <el-col :span="24">
            <el-form-item label="其他说明">
              <el-input :readonly="isDisabled" v-model="cashFlowDiffDesc" :maxlength="800" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" v-if="!isDisabled">
        <el-button size="mini" @click="dialogShow = false">取消填报</el-button>
        <el-button size="mini" type="primary" @click="submit">完成填报</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { requestTips, fmoneyThousand } from '@/common/js/utils.js';
  import Api from '../../../../api/incomeAndExpenditurePlan';
  import { formatDate } from '@g/js/utils';
  import myPagination from '@c/padingation.vue';
  export default {
    name: 'cashMonthTable',
    props: {
      currentRow: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },

    data() {
      return {
        dialogShow: false,
        total: 0,
        currentPage: 1,
        pageSize: 10,
        cashFlowDiffDesc: '',
        list: [],
        totalAmount: 0,
        chooseList: [], //填写过差异说明的数据
        isDisabled: false,
      };
    },

    methods: {
      init() {
        this.dialogShow = true;
        this.isDisabled = Boolean(this.$route.query.isproc);
        this.$nextTick(() => {
          this.getInfo();
          this.getDataSource();
          this.cashFlowDiffDesc = this.currentRow?.diffDesc;
        });
      },

      async getInfo() {
        let res = await Api.moneyContrastEditInfo({
          cashFlowKey: this.currentRow.primaryKey,
          status: 1,
        });
        this.chooseList = res.rows || [];
      },

      async getDataSource(paging) {
        let res = await Api.moneyContrastEditList({
          projectId: this.$route.query.projectKey,
          fiscalYear: this.$route.query.year,
          fiscalMonth: this.$route.query.month,
          subjectIdList: [this.currentRow?.subjectKey],
          cashFlowProcId: this.currentRow?.primaryKey,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        });
        if (res.rows && res.rows.length > 0) {
          res.rows.forEach(item => {
            item.cycleStartTime = formatDate(item.cycleStartTime, 'yyyy-MM-dd');
            item.cycleEndTime = formatDate(item.cycleEndTime, 'yyyy-MM-dd');
            item.actualPaymentDate = formatDate(item.actualPaymentDate, 'yyyy-MM-dd');
            item.voucherDate = formatDate(item.voucherDate, 'yyyy-MM-dd');
            if (paging) {
              const index = this.chooseList.findIndex(el => el.payRecordKey === item.payRecordKey);
              if (index !== -1) {
                item.diffDesc = this.chooseList[index].diffDesc;
              }
            }
          });
        }
        this.list = res.rows || [];
        this.total = res.total;

        this.totalAmount = !isNaN(res.totalAmount) && res.totalAmount !== null ? fmoneyThousand(res.totalAmount) : '0';
      },

      async submit() {
        let list = this.chooseList.map(item => ({ diffDesc: item.diffDesc, cashFlowKey: this.currentRow.primaryKey, payRecordKey: item.payRecordKey, projectKey: this.$route.query.projectKey, billKey: item.billKey, assetCode: item.assetCode }));
        let res = await Api.moneyContrastEditSave({
          cashFlowId: this.currentRow.primaryKey,
          cashFlowDiffDesc: this.cashFlowDiffDesc,
          diffDescFillItemList: list,
        });
        requestTips(res, () => {
          this.dialogShow = false;
          this.$emit('refresh');
        });
      },

      //维护已选中的数据list
      handleChooseList() {
        this.list.forEach(item => {
          // 判断listTwo中是否已经存在相同的payRecordKey
          const index = this.chooseList.findIndex(el => el.payRecordKey === item.payRecordKey);
          if (item.diffDesc) {
            // 如果diffDesc不为空，判断listTwo中是否存在相同的payRecordKey
            if (index !== -1) {
              // 如果找到相同payRecordKey，进行替换
              this.chooseList[index] = item;
            } else {
              // 如果没有相同payRecordKey，则添加到listTwo
              this.chooseList.push(item);
            }
          } else {
            // 如果diffDesc为空，且listTwo中有相同payRecordKey，删除对应对象
            if (index !== -1) {
              this.chooseList.splice(index, 1);
            }
          }
        });
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('paging');
      },
    },

    components: { myPagination },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog .el-dialog__footer {
    text-align: right;
  }
</style>
